<template>
	<view style="">
		<view style="color: #1E1E1E;font-size:50rpx;margin-top: 250rpx;font-weight: 700;margin-left: 30rpx;">请绑定手机号
		</view>
		<view class="flex  align-center" :class=" selected==true ? 'selected' : 'sess' " style="">
			<input style="font-size:35rpx;color: #BDC4CE;margin-left: 15rpx;height: 100%;line-height: 112rpx;"
				v-model="phone" placeholder="请输入手机号" type="number" name="phone" @click="selected=true"
				@blur="selected=false"></input>
		</view>
		<view class="flex  align-center justify-between" :class=" selected==true ? 'selected' : 'sess' " style="">
			<input style="font-size:35rpx;color: #BDC4CE;margin-left: 15rpx;height: 100%;line-height: 112rpx;"
				v-model="code" placeholder="请输入验证码" type="number" name="phone" @click="selected=true"
				@blur="selected=false"></input>
				<view class="codeimg" @click.stop="getCode()">{{getCodeText}}</view>
		</view>
		<button style="margin-top:100rpx;" class="common-btn  flex justify-center" @click="login">
			<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin"></text>
			<!-- <text style="margin-top: 5rpx;"></text> -->
			登录
		</button>
		<!-- 适配平板占位盒子 -->
		<view style="width:100%;height: 80rpx;"></view>
	</view>
</template>

<script>
	export default {
	data() {
		return {
			selected: false,
			// 是否加载
			isLoading: false,
			phone:null,
			code:null,
			getCodeText: '获取验证码',
			getCodeisWaiting: false,
			sign:'',
			 dataYan:{
				 
			 }
		}
	},
	onLoad(e) {
		this.dataYan = JSON.parse(e.data)
		console.log(this.dataYan,'我我我')
	},
		methods: {
			getCode() {
				let _this = this;
				// 隐藏软键盘
				uni.hideKeyboard()
				// 避免重复点击
				if (_this.getCodeisWaiting) {
					return;
				}
				if (!this.$tools.validPhone(this.phone)) {
					return;
				}
				_this.getCodeText = "发送中..."
				let data = {
					phone: this.phone,
				}
				this.$api.code(data).then((res) => {
				    this.sign = res.data.result
					console.log(res,'尹元康好帅')
					if (res.data.code == 0) {
			           this.$tools.showToast('验证码已发送...')
			           _this.setTimer();
					}
				})
                
			},
			setTimer() {
				let holdTime = 59,
					_this = this;
				_this.getCodeText = "重新获取(60)"
				_this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						_this.getCodeisWaiting = false;
						_this.getCodeText = "获取验证码"
						clearInterval(_this.Timer);
						return;
					}
					_this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			login(){
				let data = {
					nickName: this.dataYan.nickName,
					openId:this.dataYan.openId,
					avatarUrl:this.dataYan.avatarUrl,
					unionId:this.dataYan.unionId,
					phone: this.phone,
					code:this.code,
					sign:this.sign
					
				}
				this.$api.weiloing(data).then((res) => {
						this.$cache.set('token', res.data.result.token)
						this.$cache.set('phone', res.data.result.phone)
						this.$cache.set('id', res.data.result.id)
				   uni.navigateTo({
				   	url: './guide?id=' + res.data.result.id,
				   	animationType: 'zoom-fade-out',
				   	animationDuration: 500,
				   })
				})
			}
		}
	}
</script>

<style scoped>
	.selected {
		width: 690rpx;
		height: 112rpx;
		margin: 50rpx 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		border: 5rpx solid #492D22;
	}

	.sess {
		width: 690rpx;
		height: 112rpx;
		margin: 50rpx 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		border: 1rpx solid #7A6A56;
	}
	.common-btn {
		font-size: 35rpx;
		text-align: center;
		width: 530rpx;
		background: #492D22;
		opacity: 1;
		height: 112rpx;
		text-align: center;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
